<template>
  <div>
    <div class="footer"></div>
    <div class="footer-seat">
      <div class="footer-lists">
        <ul>
          <li v-for="v in navData" :key="v.path">
            <router-link :to="v.path" active-class="selected">
              <i class="iconfont" :class="v.icon"></i>
              <span>{{ v.title }}</span>
            </router-link>
            <span class="count" v-show="v.path === '/shopping'">{{ totalNum }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { basketStore } from "@/store/basekt";
import { navData } from "@/utils/config";
import { storeToRefs } from "pinia";

const useBasketStore = basketStore();
const { totalNum } = storeToRefs(useBasketStore);
</script>

<style scoped></style>
